<template>
  <div class="Bar-Basic" ref="chart"></div>
</template>

<script>
import barOptions from "@/MCharts/components/bar/options";
import { px2 } from "@/MCharts/style/Style";
export default {
  name: "MChartsBar",
  data() {
    return {
      chart: null,
    };
  },
  props: {
    data: {},
    options: {},
    type: String,
  },
  watch: {
    data: {
      handler: function (e) {
        console.log("bar", e);
        this.init();
      },
      deep: true,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    px2,
    init() {
      let chartDom = this.$refs.chart;
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(chartDom);

      this.chart = myChart;

      // 指定图表的配置项和数据
      var option = barOptions.getOptions(this.data, this.options, "Basic");

      // 使用刚指定的配置项和数据显示图表。
      myChart.clear();
      myChart.setOption(option);
      myChart.off("click");
      myChart.on("click", (e) => {
        this.$emit("handleClick", e);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/MCharts/style/var.scss";
.Bar-Basic {
  height: 100%;
  width: 100%;
}
</style>
